<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="./03-javascript-state-machine.js"></script>
  <script>
    // 状态模式 状态机实现promise部分功能
    // 模型
    var fsm = new StateMachine({
      init: 'pending',
      transitions: [{
        name: 'resolve',
        from: 'pending',
        to: 'fullfilled',
      }, {
        name: 'reject',
        from: 'pending',
        to: 'rejected'
      }],
      methods: {
        // 成功
        onResolve: function (state, data) {
          // 参数：state - 当前状态示例; data - fsm.resolve(xxx) 执行时传递过来的参数
          data.successList.forEach(fn => fn())
        },

        // 失败
        onReject: function (state, data) {
          // 参数：state - 当前状态示例; data - fsm.reject(xxx) 执行时传递过来的参数
          data.failList.forEach(fn => fn())
        }
      }
    })

    // 定义 Promise
    class MyPromise {
      constructor(fn) {
        this.successList = []
        this.failList = []

        fn(() => fsm.resolve(this)
          // resolve函数
          , () => fsm.reject(this)
          // reject函数
        )
      }

      then(successFn, failFn) {
        this.successList.push(successFn)
        this.failList.push(failFn)
      }
    }

    // 测试代码
    function loadImg(src) {
      const promise = new MyPromise(function (resolve, reject) {
        var img = document.createElement('img')
        img.onload = function () {
          resolve(img)
        }
        img.onerror = function () {
          reject()
        }
        img.src = src
      })
      return promise
    }
    var src = 'http://www.imooc.com/static/img/index/logo_new.png'
    var result = loadImg(src)
    console.log(result)

    result.then(function (img) {
      console.log('success 1')
    }, function () {
      console.log('failed 1')
    })
    result.then(function (img) {
      console.log('success 2')
    }, function () {
      console.log('failed 2')
    })
  </script>
</body>

</html>